import * as React from "react"
import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"

interface PaginationProps {
  currentPage: number
  totalPages: number
  onPageChange: (page: number) => void
  className?: string
}

const Pagination = ({ currentPage, totalPages, onPageChange, className }: PaginationProps) => {
  const getPageNumbers = () => {
    const pageNumbers = []
    const maxVisiblePages = 7

    if (totalPages <= maxVisiblePages) {
      // 如果总页数小于等于最大可见页数，显示所有页数
      for (let i = 1; i <= totalPages; i++) {
        pageNumbers.push(i)
      }
    } else {
      // 如果总页数大于最大可见页数，使用省略号
      const halfVisible = Math.floor(maxVisiblePages / 2)
      
      if (currentPage <= halfVisible + 1) {
        // 当前页在前半部分
        for (let i = 1; i <= maxVisiblePages - 2; i++) {
          pageNumbers.push(i)
        }
        pageNumbers.push('...')
        pageNumbers.push(totalPages)
      } else if (currentPage >= totalPages - halfVisible) {
        // 当前页在后半部分
        pageNumbers.push(1)
        pageNumbers.push('...')
        for (let i = totalPages - maxVisiblePages + 3; i <= totalPages; i++) {
          pageNumbers.push(i)
        }
      } else {
        // 当前页在中间
        pageNumbers.push(1)
        pageNumbers.push('...')
        for (let i = currentPage - halfVisible + 1; i <= currentPage + halfVisible - 1; i++) {
          pageNumbers.push(i)
        }
        pageNumbers.push('...')
        pageNumbers.push(totalPages)
      }
    }

    return pageNumbers
  }

  if (totalPages <= 1) {
    return null
  }

  return (
    <div className={cn("flex items-center justify-center space-x-2", className)}>
      {/* Previous Button */}
      <Button
        variant="outline"
        size="sm"
        onClick={() => onPageChange(currentPage - 1)}
        disabled={currentPage === 1}
        className="h-8 w-8 p-0"
      >
        <ChevronLeft className="h-4 w-4" />
      </Button>

      {/* Page Numbers */}
      {getPageNumbers().map((pageNumber, index) => (
        <React.Fragment key={index}>
          {pageNumber === '...' ? (
            <div className="flex h-8 w-8 items-center justify-center">
              <MoreHorizontal className="h-4 w-4" />
            </div>
          ) : (
            <Button
              variant={currentPage === pageNumber ? "default" : "outline"}
              size="sm"
              onClick={() => onPageChange(pageNumber as number)}
              className="h-8 w-8 p-0"
            >
              {pageNumber}
            </Button>
          )}
        </React.Fragment>
      ))}

      {/* Next Button */}
      <Button
        variant="outline"
        size="sm"
        onClick={() => onPageChange(currentPage + 1)}
        disabled={currentPage === totalPages}
        className="h-8 w-8 p-0"
      >
        <ChevronRight className="h-4 w-4" />
      </Button>
    </div>
  )
}

// 分页信息显示组件
interface PaginationInfoProps {
  currentPage: number
  totalPages: number
  totalItems: number
  pageSize: number
  className?: string
}

const PaginationInfo = ({ currentPage, totalPages, totalItems, pageSize, className }: PaginationInfoProps) => {
  const startItem = (currentPage - 1) * pageSize + 1
  const endItem = Math.min(currentPage * pageSize, totalItems)

  return (
    <div className={cn("text-sm text-gray-600", className)}>
      显示 {startItem} - {endItem} 项，共 {totalItems} 项结果
    </div>
  )
}

// 页面大小选择组件
interface PageSizeSelectProps {
  pageSize: number
  onPageSizeChange: (size: number) => void
  pageSizeOptions?: number[]
  className?: string
}

const PageSizeSelect = ({ 
  pageSize, 
  onPageSizeChange, 
  pageSizeOptions = [10, 20, 50, 100], 
  className 
}: PageSizeSelectProps) => {
  return (
    <div className={cn("flex items-center space-x-2", className)}>
      <span className="text-sm text-gray-600">每页显示</span>
      <select
        value={pageSize}
        onChange={(e) => onPageSizeChange(Number(e.target.value))}
        className="px-2 py-1 border border-gray-300 rounded text-sm focus:ring-2 focus:ring-slate-500 focus:border-transparent"
      >
        {pageSizeOptions.map((size) => (
          <option key={size} value={size}>
            {size}
          </option>
        ))}
      </select>
      <span className="text-sm text-gray-600">项</span>
    </div>
  )
}

// 完整的分页组件（包含分页导航、信息和页面大小选择）
interface CompletePaginationProps {
  currentPage: number
  totalPages: number
  totalItems: number
  pageSize: number
  onPageChange: (page: number) => void
  onPageSizeChange: (size: number) => void
  pageSizeOptions?: number[]
  className?: string
}

const CompletePagination = ({
  currentPage,
  totalPages,
  totalItems,
  pageSize,
  onPageChange,
  onPageSizeChange,
  pageSizeOptions,
  className
}: CompletePaginationProps) => {
  return (
    <div className={cn("flex items-center justify-between", className)}>
      <PaginationInfo
        currentPage={currentPage}
        totalPages={totalPages}
        totalItems={totalItems}
        pageSize={pageSize}
      />
      <div className="flex items-center space-x-4">
        <PageSizeSelect
          pageSize={pageSize}
          onPageSizeChange={onPageSizeChange}
          pageSizeOptions={pageSizeOptions}
        />
        <Pagination
          currentPage={currentPage}
          totalPages={totalPages}
          onPageChange={onPageChange}
        />
      </div>
    </div>
  )
}

export { Pagination, PaginationInfo, PageSizeSelect, CompletePagination }